<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blueprint Table - Features (Legacy)</title>
  <link rel="stylesheet" type="text/css" href="features.css">
  <style>
    body {
      padding: 80px 20px 20px 20px;
    }

    body.pt-dark {
      background-color: #293742;
    }

    #table-big {
      width: 1800px;
      height: 1200px;
    }

    #table-1 {
      display: inline-block;
    }

    #table-3 {
      width: 100px;
      height: 100px;
    }

    .fixed-size-table {
      width: 700px;
      height: 300px;
    }

    #table-6 .pt-table-header-content h4 {
      margin: 10px 0 0 10px;
    }

    #table-6 .pt-table-header-content p {
      padding: 10px 10px 0;
    }

    .stack-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 20px;
      background-color: rgba(0, 128, 255, 0.1);
      line-height: 30px;
      text-align: center;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div id="nav"></div>

  <h4>Basic Table</h4>
  <div id="table-0"></div>
  <br /><br />

  <h4>Column Type Formats</h4>
  <div id="table-formats" class="fixed-size-table"></div>
  <div class="resize-default pt-button pt-intent-success">Resize Default</div>
  <div class="resize-wrapped pt-button pt-intent-success">Resize Wrapped Text</div>
  <div class="resize-json pt-button pt-intent-success">Resize JSON</div>
  <div class="resize-json-wrapped pt-button pt-intent-success">Resize Json Wrapped Text</div>
  <div class="resize-wrapped-and-json pt-button pt-intent-success">Resize Wrapped and Json Text</div>
  <div class="resize-viewport pt-button pt-intent-success">Resize Viewport</div>
  <br /><br />

  <h4>Editable Column Names and Cells</h4>
  <p>Validation with alpha characters only.</p>
  <div id="table-editable-names"></div>
  <br /><br />

  <h4>Big Table</h4>
  <div id="table-big"></div>
  <br /><br />

  <h4>All Selection Modes, Body Context Menu</h4>
  <div id="table-2"></div>
  <br /><br />

  <h4>Row Transformed Controlled Selection</h4>
  <div id="table-select-rows"></div>
  <br /><br />

  <h4>Ghost Inline</h4>
  <div id="table-inline-ghost" style="display: inline-block;"></div>
  <br /><br />

  <h4>Ghost Cells</h4>
  <div id="table-ghost" class="fixed-size-table"></div>
  <br /><br />

  <h4>Ledger</h4>
  <div id="table-ledger" style="display: inline-block;"></div>
  <br /><br />

  <h4>Intents, Inline, &amp; No Resizing</h4>
  <div id="table-1"></div>
  <br /><br />

  <h4>Add/Remove/Rearrange Columns</h4>
  <div id="table-cols"></div>
  <br />
  <div class="remove-column-button pt-button pt-intent-danger">- Remove Column</div>
  <div class="add-column-button pt-button pt-intent-success">+ Add Column</div>
  <div class="swap-columns-button pt-button pt-intent-primary">Swap Columns</div>
  <br /><br />

  <h4>Too Small, No Row Headers</h4>
  <div id="table-3"></div>
  <br /><br />

  <h4>Custom Row Headers</h4>
  <div id="table-4"></div>
  <br /><br />

  <h4>Styled Region Groups, "Active" Columns</h4>
  <div id="table-5"></div>
  <br /><br />

  <h4>Menus &amp; Extended Headers</h4>
  <div id="table-6" class="fixed-size-table"></div>
  <br /><br />

  <h4>Custom Column Header Wrapper</h4>
  <div id="table-7" class="fixed-size-table"></div>
  <br /><br />

  <h4>Named Columns</h4>
  <div id="table-8"></div>
  <br /><br />

  <h4>Stacking Context</h4>
  <div id="table-9"></div>
  <br /><br />

  <h4>Reorderable Rows and Columns</h4>
  <div id="table-10"></div>
  <br /><br />

  <h4>Scrollable Rows</h4>
  <div id="table-11"></div>
  <br /><br />

  <h4>Table with auto height and ghost cells enabled</h4>
  <div id="table-12"></div>
  <br /><br />

  <script src="features.bundle.js"></script>
</body>
</html>
